{% from 'macros.html' import print_message %}

<!DOCTYPE html>
<html lang="en-GB">
<head>
  {%- block head -%}
  <meta charset="utf-8" />
  <title>{% block title %}ListenBrainz{% endblock %}</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi, minimal-ui' />

  <link rel="icon" sizes="16x16" href="{{ url_for('static', filename='img/favicon-16.png') }}" type="image/png" />
  <link rel="icon" sizes="256x256" href="{{ url_for('static', filename='img/favicon-256.png') }}" type="image/png" />
  <link rel="icon" sizes="32x32" href="{{ url_for('static', filename='img/favicon-32.png') }}" type="image/png" />

  {# The css file has a .less extension in the manifest file entry (due to its original name in Webpack entry) #}
  <link href="{{ get_static_path('vendors.scss') }}" rel="stylesheet" media="screen" />
  <link href="{{ get_static_path('main.scss') }}" rel="stylesheet" media="screen" />
  {%- endblock -%}
</head>

<body>
{%- include 'navbar.html' -%}

<div class="container-fluid">

  {% with messages = get_flashed_messages(with_categories=true) %}
  {% for category, message in messages %}
  {{ print_message(message, category) }}
  {% endfor %}
  {% endwith %}

  <div id="react-container">
    {%- block content -%}
      <!-- Page content -->
    {%- endblock -%}
  </div>

  {%- block footer -%}
  <section class="footer">
    <div class="container-fluid px-4">
      <div class="row align-items-baseline">
        <div class="col-sm-12 col-md-6">
          <h3>
            <img src="{{ url_for('static', filename='img/listenbrainz-logo.svg') }}" width="180" alt="ListenBrainz"/>
          </h3>
          <br/>
          <p`>
            ListenBrainz keeps track of music you listen to and provides you with insights into your listening habits.
            <br>
            You can use ListenBrainz to track your listening habits, discover new music with personalized recommendations, and share your musical taste with others using our visualizations.
          </p>
          <ul class="list-unstyled">
            <li class="color-a">
              <span`>IRC: </span> <a href="https://kiwiirc.com/nextclient/irc.libera.chat/?#metabrainz" target="_blank" rel="noopener noreferrer" > #metabrainz</a>
            </li>
            <li class="color-a" >
              <span`>Email: </span> <a href="mailto:support@metabrainz.org">support@metabrainz.org </a>
            </li>
          </ul>
        </div>
        <br/>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <h3 class="text-brand text-body">Useful Links</h3>
          <ul class="list-unstyled">
            <li>
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <a href="https://metabrainz.org/donate" target="_blank" rel="noopener noreferrer" >Donate</a>
            </li>
            <li>
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <a href="https://wiki.musicbrainz.org/Main_Page" target="_blank" rel="noopener noreferrer" >Wiki</a>
            </li>
            <li>
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <a href="https://community.metabrainz.org/" target="_blank" rel="noopener noreferrer" >Community</a>
            </li>
            <li>
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <a href="https://blog.metabrainz.org/" target="_blank" rel="noopener noreferrer" >Blog</a>
            </li>
            <li>
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <a href="https://www.redbubble.com/people/metabrainz/shop" target="_blank" rel="noopener noreferrer" >Shop</a>
            </li>
            <li>
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <a href="https://metabrainz.org/" target="_blank" rel="noopener noreferrer" >MetaBrainz</a>
            </li>
            <li class="visible-xs">
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <a href="https://github.com/metabrainz/listenbrainz-server" target="_blank" rel="noopener noreferrer" >Contribute Here</a>
            </li>
            <li class="visible-xs">
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <a href="https://tickets.metabrainz.org/" target="_blank" rel="noopener noreferrer" >Bug Tracker</a>
            </li>
          </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <h3 class="text-brand text-body">Fellow Projects</h3>
          <ul class="list-unstyled">
            <li>
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/>  <img src="{{ url_for('static', filename='img/meb-icons/MusicBrainz.svg') }}" width="18" height="18" alt="MusicBrainz"/> <a href="https://musicbrainz.org/" target="_blank" rel="noopener noreferrer" >MusicBrainz</a>
            </li>
            <li>
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/>  <img src="{{ url_for('static', filename='img/meb-icons/CritiqueBrainz.svg') }}" width="18" height="18" alt="CritiqueBrainz"/> <a href="https://critiquebrainz.org/" target="_blank" rel="noopener noreferrer" >CritiqueBrainz</a>
            </li>
            <li class="item-list-a">
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <img src="{{ url_for('static', filename='img/meb-icons/Picard.svg') }}" width="18" height="18" alt="Picard"/> <a href="https://picard.musicbrainz.org/" target="_blank" rel="noopener noreferrer" >Picard</a>
            </li>
            <li>
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <img src="{{ url_for('static', filename='img/meb-icons/BookBrainz.svg') }}" width="18" height="18" alt="BookBrainz"/> <a href="https://bookbrainz.org/" target="_blank" rel="noopener noreferrer" >BookBrainz</a>
            </li>
            <li>
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <img src="{{ url_for('static', filename='img/meb-icons/AcousticBrainz.svg') }}" width="18" height="18" alt="AcousticBrainz"/> <a href="https://acousticbrainz.org/" target="_blank" rel="noopener noreferrer" >AcousticBrainz</a>
            </li>
            <li>
              <img src="{{ url_for('static', filename='img/icons/angle_double_right_icon.svg') }}" width="18" height="18"/> <img src="{{ url_for('static', filename='img/meb-icons/CoverArtArchive.svg') }}" width="18" height="18" alt="CoverArtArchive"/> <a href="https://coverartarchive.org" target="_blank" rel="noopener noreferrer" >Cover Art Archive</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="row center-p">
        <div class="col-md-3 d-none d-md-block hidden-xs">
          <p class="section-line">
            OSS Geek?  <a href="https://github.com/metabrainz/listenbrainz-server" target="_blank" rel="noopener noreferrer" > <span  class="color-a"> Contribute Here </span> </a>
          </p>
        </div>
        <div class="col-md-6">
          <p class="section-line">
            Brought to you by <img src="{{ url_for('static', filename='img/meb-icons/MetaBrainz.svg') }}" width="30" height="30" alt="MetaBrainz"/> <span class="color-a"> MetaBrainz Foundation </span>
          </p>
        </div>
        <div class="col-md-3 d-none d-md-block hidden-xs">
          <p class="section-line">
            Found an Issue?  <a href="https://tickets.metabrainz.org/" target="_blank" rel="noopener noreferrer" > <span class="color-a"> Report Here </span></a>
          </p>
        </div>
      </div>
    </div>

  </section>
  {%- endblock -%}

  {%- block scripts -%}
  <script src="{{ url_for('static', filename='js/lib/bootstrap.bundle.min.js') }}"></script>
  {%- endblock -%}
</body>
</html>
